<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/echarts.min.js"></script>
</head>

<body>
  <div id="echarts" style="width: 600px;height:400px;"></div>
  <script>
    let mCharts = echarts.init(document.getElementById('echarts'))

    // 雷达图的最大值
    var dataMax = [
      {
        name: '易用性',
        max: 100
      },
      {
        name: '功能',
        max: 100
      },
      {
        name: '拍照',
        max: 100
      },
      {
        name: '跑分',
        max: 100
      },
      {
        name: '续航',
        max: 100
      }
    ]

    const option = {
      radar: {
        // 每个节点的最大值
        indicator: dataMax,
        shape: 'circle' //配置雷达图最外层为圆形，默认为多边形
      },
      series: [
        {
          type: 'radar', // 设置为雷达图
          data: [
            {
              name: "Apple IPhone X",
              value: [80, 90, 80, 82, 90]
            },
            {
              name: "华为",
              value: [70, 82, 75, 70, 78]
            }
          ],
          label: {
            show: true
          },
          // 设置阴影
          areaStyle: {},
        },
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>